<template>
    <div class="company-msg">
        <first-template>
            <div class="title" slot="title">
                企业信息
                <i-button type="primary" @click="isEditer = !isEditer">{{controlName[Number(isEditer)]}}</i-button>
            </div>
            <div class="details" slot="content">
                <div class="user-detail">
                    <div class="img-box">
                        <img src="" alt="">
                        <span v-if="isEditer" class="upload-box">
                            更换头像
                            <input type="file" />
                        </span>
                    </div>
                    <div class="detail-msg">
                         <template v-if="!isEditer">
                             <div class="msg-top">
                                 <span class="msg-item">
                                    联系人：刘大海
                                 </span>
                                 <span class="msg-item">
                                    联系电话：15990012172
                                 </span>
                                 <span class="msg-item">
                                    企业简称：中国一建
                                 </span>
                             </div>
                             <div class="flag">
                                 标签：<span class="flag-item">专业分包</span>
                             </div>
                         </template>
                         <template v-else>
                             <i-form inline>
                                 <form-item label="联系人：">
                                     <i-input placeholder="请输入联系人"></i-input>
                                 </form-item>
                                 <form-item label="联系电话：">
                                     <i-input placeholder="请输入联系人电话号码"></i-input>
                                 </form-item>
                                 <form-item label="企业简称：">
                                     <i-input placeholder="请输入企业简称"></i-input>
                                 </form-item>
                                 <form-item label="标签：">
                                     <span class="flag-item">专业分包 <Icons type="close"></Icons></span>
                                     <span class="flag-item add-flag" @click="showAddFlag = true">添加标签</span>
                                 </form-item>
                             </i-form>
                         </template>
                    </div>
                </div>
                <div class="company">
                    <common-title 
                    :bottom="false"
                    :padding="false"
                    >
                        企业资质：
                    </common-title>
                    <div class="company-detail">
                        <div class="img-item" v-for="(item, i) in 'sdfdsf'" :key="i">
                            <img src="" alt="">
                            <span class="img-name">资质名称资质名称资质名称</span>
                        </div>
                        <div class="img-item  add-zizhi" v-if="isEditer">
                            <input type="file">
                            <img src="" alt="">
                            上传资质证书
                        </div>
                    </div>
                </div>
                <div class="business">
                    <common-title 
                    :bottom="false"
                    :padding="false"
                    >
                        营业执照：
                    </common-title>
                    <div class="business-detail">
                        <div class="img-box">
                            <img src="" alt="">
                        </div>
                        <div class="company-address">
                            <span>企业名称：浙江亚雀科技有限公司</span>
                            <span>证件号：420236264787386527</span>
                            <span>经营期限：2019-09-09至永久</span>
                            <span>所在地区：浙江省杭州市西湖区西溪花园荆州元</span>
                        </div>
                    </div>
                </div>
            </div>
        </first-template>
        <Drawer title="添加标签" width="512" :closable="false" v-model="showAddFlag">
            <div class="flag-list">
                <div class="flag-item" :class="item.checked ? 'current': ''" v-for="(item, i) in flagList" :key="i" @click="chioceFlag(item, i)">
                    {{item.name}}
                </div>
            </div>
            <div class="drawer-footers">
                <i-button  @click="showAddFlag = false">取消</i-button>
                <i-button type="primary">确定</i-button>
            </div>
        </Drawer>
    </div>
</template>
<script>
export default {
    name: 'companyMsg',
    data () {
        return {
            isEditer: false ,
            controlName: ['编辑', '保存'],
            showAddFlag: false,
            flagList: [
                {
                    name: '设备分包',
                    checked: false
                },
                {
                    name: '设备分包',
                    checked: false
                },
                {
                    name: '设备分包',
                    checked: false
                },
                {
                    name: '设备分包',
                    checked: false
                }
            ]
        }
    },
    computed: {
        getFlagList () {
            const {flagList} = this
            return flagList.filter(r => {
                return r.checked == true
            }) || []
        }
    },
    methods: {
        chioceFlag (item, i) {
            item.checked = !item.checked
            this.$set(this.flagList, i, item)
        },
        resetFlag () {
            let {flagList} = this
            flagList = flagList.map(r => {
                r.checked = false
                return r
            }) || []
            this.flagList = flagList
        }
    },
    watch: {
        showAddFlag (val) {
            if (!val) {
                this.resetFlag()
            }
        }
    }
}
</script>
<style lang="less" scoped>
.company-msg {
    .title {
        button {
            float: right;
            margin-top: 14px;
        }
    }
    .details {
        padding: 0 20px;
        >div {
            border-bottom: 1px solid #E9EDF4;
            &:last-child {
                border-bottom: 0;
            }
        }
        .user-detail {
            display: flex;
            align-items: center;
            padding: 30px 0;
            .img-box {
                width: 104px;
                img {
                    display: inline-block;
                    width: 104px;
                    height: 104px;
                    border-radius: 50%;
                    background: #f00;
                }
                .upload-box {
                    display: inline-block;
                    width: 110px;
                    height: 32px;
                    border-radius: 4px;
                    border:1px solid rgba(217,217,217,1);
                    position: relative;
                    line-height: 32px;
                    text-align: center;
                    input {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        cursor: pointer;
                    }
                }
            }
            .detail-msg {
                flex: 1;
                padding-left: 32px;
                font-size: 14px;
                color: #333;
                .msg-top {
                    padding-bottom: 24px;
                }
                .flag-item {
                    display: inline-block;
                    height: 22px;
                    border-radius: 4px;
                    border: 1px solid #1298FC;
                    line-height: 20px;
                    padding: 0 7px;
                    margin-right: 10px;
                    color: #1298FC;
                    position: relative;
                    &.add-flag {
                        cursor: pointer;
                    }
                    i {
                        font-size: 16px;
                        position: absolute;
                        top: -8px;
                        right: -8px;
                        background: #fff;
                        cursor: pointer;
                    }
                }
                form {
                    width: 90%;
                    .ivu-form-item {
                        width: 48%;
                    }
                }
            }
        }
        .company {
            width: 100%;
            .company-detail {
                padding: 0 16px;
                overflow: hidden;
                .img-item {
                    float: left;
                    width: calc(25% - 7.5px);
                    margin-right: 10px;
                    text-align: center;
                    margin-bottom: 20px;
                    &:nth-child(4n+4) {
                        margin-right: 0;
                    }
                    &.add-zizhi {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        background: #f00;
                        flex-direction: column;
                        min-height: 100px;
                        border-radius: 4px;
                        input {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                            cursor:pointer;
                        }
                        img {
                            display: inline-block;
                            width: 32px;
                            height: 28px;
                            background: #1298FC;
                            min-height: 28px;
                        }
                    }
                    img {
                        display: block;
                        width: 100%;
                        min-height: 100px;
                        background: #f00;
                        border-radius: 4px;
                        margin-bottom: 12px;
                    }
                }
            }
        }
        .business {
            .business-detail {
                padding: 0 16px;
                overflow: hidden;
                .img-box {
                    width: 100%;
                    overflow: hidden;
                    margin-bottom: 30px;
                    img {
                        display: inline-block;
                        width: calc(25% - 7.5px);
                        min-height: 100px;
                        background: #f00;
                        border-radius: 4px;
                    }
                }
                .company-address {
                    overflow: hidden;
                    span {
                        float: left;
                        width: 33.33%;
                        margin-bottom: 20px;
                    }
                }
            }
        }
    }
}
/deep/.drawer-footers {
        position: absolute;
        width:100%;
        height: 60px;
        line-height: 60px;
        text-align: right;
        border-top: 1px solid #F0F0F0;
        left: 0;
        bottom: 0;
        button {
            margin-right: 12px;
        }
    }
    .flag-list {
        overflow: hidden;
        width: 100%;
        .flag-item {
            float: left;
            width: 80px;
            height: 32px;
            border-radius: 4px;
            border: 1px solid #D9D9D9;
            color: #666666;
            margin: 0 10px 20px 0;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            &.current {
                color: #1298FC;
                border-color: #1298FC;
            }
        }
    }
</style>